<template>
  <div class="subject">

    <!--头部-->
    <div class="top">
      <!--查询条件-->
      <div class="left">

      </div>

      <!--新增课程-->
      <div class="add">
        <Button type="success" size="default" @click="addSubject"> 新增课程</Button>
      </div>
    </div>

    <!--主体-->
    <div class="body">
      <Table
        border
        :loading="loadingFlag"
        show-header
        size="small"
        draggable
        :columns="columns"
        :data="subjectList"
        @on-drag-drop="showOrder">

        <!--课程名-->
        <template slot-scope="{ row, index }" slot="subjectName">
          <span class="allPanel" @click="openSubjectDetails(row)">{{row.subjectName}}</span>
        </template>

        <!--课时-->
        <template slot-scope="{ row, index }" slot="cover">
          <img
            class="modal-img"
            :src="row.subjectDetails.subPic"
            @click="openCover(row)">
        </template>

        <!--课时-->
        <template slot-scope="{ row, index }" slot="total">
          <span>{{row.subjectDetails.subTotal}}</span>
        </template>

        <!--评分-->
        <template slot-scope="{ row, index }" slot="score">
          <span>{{row.subjectDetails.subScore}}</span>
        </template>

        <!--vip-->
        <template slot-scope="{ row, index }" slot="vip">
          <img
            v-if="row.subjectDetails.vip!=0"
            class="vipImg"
            src="../../assets/course/vip.png">
        </template>

        <!--排序-->
        <!--<template slot-scope="{ row, index }" slot="showOrder">
          <span>
            <Button size="small" type="primary" @click="orderUp(row, index)">上移</Button>
            <Button size="small" type="primary" @click="orderDown(row, index)">下移</Button>
          </span>
        </template>-->

        <!--编辑-->
        <template slot-scope="{ row, index }" slot="update">
          <Button size="small" type="info" @click="update(row, index)">编辑</Button>
        </template>

        <!--状态-->
        <template slot-scope="{ row, index }" slot="status">
          <span>
            <Button size="small" type="success" v-if="row.status == 1" @click="changeStatus(row, index)">在用</Button>
            <Button size="small" type="error" v-if="row.status == 0" @click="changeStatus(row, index)">失效</Button>
          </span>
        </template>

        <!--删除-->
        <template slot-scope="{ row, index }" slot="del">
          <Button size="small" type="error" @click="delSubject(row)">删除</Button>
        </template>

      </Table>
    </div>


    <!--修改课程状态-->
    <Modal
      v-model="updateStatusPanel"
      title="修改课程状态"
      @on-ok="okUpdateStatus">
      <div v-if="tmpObj.status==0">
        确定
        <span class="modal-warning"> 上线 </span>
        <span class="modal-warning"> {{tmpObj.subjectName}} </span>
        吗？
      </div>
      <div v-if="tmpObj.status==1">
        确定
        <span class="modal-warning"> 下线 </span>
        <span class="modal-warning"> {{tmpObj.subjectName}} </span>
        吗？
      </div>
    </Modal>


    <!--删除课程-->
    <Modal
      v-model="delTipPanel"
      title="删除课程"
      @on-ok="okDel">
      <p>
        确定删除
        <span class="modal-warning">{{tmpObj.subjectName}}</span>
        课程吗 ?
        <br>
        <br>
        <span class="modal-warning">【不可恢复，谨慎删除】</span>
      </p>
    </Modal>

  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //加载中
        loadingFlag: true,
        // 表格数据
        columns: [
          {
            title: "序号",
            // key: 'id',
            type: 'index',
            //可拖拽
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "课程名",
            slot: 'subjectName',
            key: 'subjectName',
            resizable: true,
            align: "left",
          },
          {
            title: "封面",
            slot: 'cover',
            key: 'cover',
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "课时",
            slot: 'total',
            key: 'total',
            resizable: true,
            align: "center",
            width: 80
          },
          {
            title: "评分",
            slot: "score",
            key: 'score',
            resizable: true,
            align: "center",
            width: 80
          },
          {
            title: "vip",
            slot: "vip",
            key: 'vip',
            resizable: true,
            align: "center",
            width: 80
          },
          /*{
            title: "排序",
            slot: "showOrder",
            key: 'showOrder',
            resizable: true,
            align: "center",
            width: 160
          },*/
          {
            title: "编辑",
            slot: "update",
            key: 'update',
            resizable: true,
            align: "center",
            width: 80
          },
          {
            title: "状态",
            slot: "status",
            key: 'status',
            resizable: true,
            align: "center",
            width: 80
          },
          {
            title: "删除",
            slot: 'del',
            //可拖拽
            resizable: true,
            align: "center",
            width: 80
          }
        ],
        //课程列表
        subjectList: [],
        //修改状态
        updateStatusPanel: false,
        //删除提示
        delTipPanel: false,
        tmpObj: {
          subjectId: "",
          subjectName: "",
          status: "",
          showOrder: "",
          subjectDetails: {
            subjectDetailsId: "",
            subjectId: "",
            subPic: "",
            subTotal: "",
            subScore: "",
            subTeacher: "",
            qqGroup: "",
            subIntroduction: "",
            status: ""
          }
        }
      }
    },
    methods: {
      //新增轮播图
      addSubject: function () {
        this.$router.push("/addSubject");
      },
      //打开详细信息
      openSubjectDetails: function (row) {
        this.tmpObj = row
        //跳转
        let {href} = this.$router.resolve({
          name: "SubjectDetails",
          query: {
            sid: this.tmpObj.subjectId
          }
        });
        window.open(href, '_blank');
      },
      //打开封面
      openCover:function(row){
        window.open(row.subjectDetails.subPic, '_blank');
      },
      //上移
      orderUp: function (row, index) {
        if (index == 0) {
          //提示
          this.$Notice.warning({
            title: "第一条数据不能上移",
          })
          return false
        }
        //TODO
      },
      //下移
      orderDown: function (row, index) {
        let length = this.subjectList.length
        if (index == (length - 1)) {
          //提示
          this.$Notice.warning({
            title: "最后一条数据不能下移",
          })
          return false
        }
        //TODO
      },
      //拖拽排序
      showOrder: function (from, to) {
        let fromObj = this.subjectList[from];
        let toObj = this.subjectList[to];

        this.$set(this.subjectList, from, toObj)
        this.$set(this.subjectList, to, fromObj)

        let fromShowOrder = fromObj.showOrder;
        let toShowOrder = toObj.showOrder;

        fromObj.showOrder = toShowOrder
        toObj.showOrder = fromShowOrder

        let array = new Array();
        array.push(fromObj)
        array.push(toObj)
        this.axios.put(`/course/subject/subjects`, array)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              /*this.$Notice.success({
                title: "排序成功"
              })*/

              let content = `
                <div style="fo  nt-size:14px;color: #FF0000">以下两门课程已经置换排序</div>
                <br>
                <div style="color: #FF0000">《 ${fromObj.subjectName} 》</div>
                <br>
                <div style="color: #FF0000">《 ${toObj.subjectName} 》</div>
              `
              this.$Modal.success({
                title: "排序成功",
                content: content
              });

              //重新请求
              this.init()
            }
          })
      },
      //排序
      instance: function () {

      },
      //编辑
      update: function (row, index) {
        this.tmpObj = row
        //跳转
        let {href} = this.$router.resolve({
          name: "UpdateSubject",
          query: {
            sid: this.tmpObj.subjectId
          }
        });

        window.open(href, '_blank');
      },
      //修改状态
      changeStatus: function (row, index) {
        this.updateStatusPanel = true
        this.tmpObj = row
      },
      //修改状态
      okUpdateStatus: function () {
        let subjectId = this.tmpObj.subjectId
        let from = this.tmpObj.status
        let to;
        if (from == 1) {
          to = 0
        } else if (from == 0) {
          to = 1
        }
        let data = {
          status: to
        }
        this.axios.put(`/course/subject/subject/${subjectId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "修改成功",
              })
              //重新请求
              this.init();
            }
          })
      },
      //删除课程
      delSubject: function (row, index) {
        this.delTipPanel = true
        this.tmpObj = row
      },
      //删除课程
      okDel: function () {
        let subjectId = this.tmpObj.subjectId
        this.axios.delete(`/course/subject/subject/${subjectId}`)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "删除成功",
              })
              //重新请求
              this.init();
            }
          })
      },
      //请求列表
      init: function () {
        this.axios.get(`/course/subject/subjectList`)
          .then((resp) => {
            if (resp.data.flag) {
              this.subjectList = resp.data.data
              this.loadingFlag = false
            }
          })
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
  .subject {
  }

  .subject .top {
    overflow: hidden;
    margin: 20px auto 15px;
  }

  /*封面预览*/
  .modal-img {
    display: inline-block;
    width: 100px;
    height: 40px;
    margin-left: -20px;
    margin-bottom: -8px;
  }

  /*查询条件*/
  .subject .top .left {
    float: left;
  }

  /*新增轮播图*/
  .subject .top .add {
    float: right;
    margin-right: 10px;
  }

  .modal-warning {
    display: inline-block;
    margin: 0px 5px;
    color: #FF0000
  }

  /*vip图片*/
  .vipImg {
    width: 50px;
    height: 32px;
  }

  /*课程名占满单元格*/
  .allPanel {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
</style>
